<template>
	<view class="_body">
		<!-- 导航栏 -->
		<view class="content">
			<!-- 导航 -->
			<view class="nav">
				<view class="nav-left flex-c-c" @tap="BackHome">
					<u-icon name="arrow-leftward" size="50rpx" color="#fff"></u-icon>
				</view>
				<view class="nav-right flex-c-c">
					<view class="nav-right-icon">
						<u-icon name="search" size="50rpx" color="#fff"></u-icon>
					</view>
					<view class="nav-right-icon">
						<u-icon name="more-dot-fill" size="50rpx" color="#fff"></u-icon>
					</view>
				</view>
			</view>

			<!-- 播客信息 -->
			<view class="info">
				<!-- 封面 -->
				<view class="info-avatar">
					<view class="info-avatar-count">
						<text class="info-avatar-count-type" v-if="info.icon">{{info.icon.value}}</text>
						<text class="info-avatar-count-play">{{info.playCount}}</text>
					</view>
					<image :src="info.picUrl"></image>
				</view>
				<view class="info-msg">
					<u--text :text="info.name" size="35rpx" color="#fff"></u--text>
					<view class="info-msg-name" v-if="info.dj">
						<u-avatar :src="info.dj.avatarUrl" size="40rpx"></u-avatar>
						<text>{{info.dj.nickname}}</text>
						<view class="info-msg-name-btn">
							<u-button size="mini" text="+关注" shape="circle"></u-button>
						</view>
					</view>
					<view class="label" v-if="info.category || info.secondCategory">
						<text class="info-msg-tips">{{info.category}}</text>
						<text class="info-msg-tips">{{info.secondCategory}}</text>
					</view>

				</view>
			</view>
			<!-- 简介 -->
			<view class="message" v-if="info.desc">
				<u--text :text="info.desc" :lines="3"></u--text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- 菜单 -->
			<view class="menu">
				<view class="share">
					<u-icon name="share" size="50rpx" color="#fff"></u-icon>
					<text>{{info.shareCount}}</text>
				</view>
				<view class="comment">
					<u-icon name="chat" size="50rpx" color="#fff"></u-icon>
					<text>{{info.commentCount}}</text>
				</view>
				<view class="collect">
					<u-icon name="star" size="50rpx" color="#fff"></u-icon>
					<text>{{info.subCount}}</text>
				</view>
			</view>
		</view>


		<!-- 渲染的条数 -->
		<view class="list">
			<view class="tab">
				<u-tabs :list="tabs" @click="TabActive"></u-tabs>
				<u-icon name="checkmark-circle" size="40rpx"></u-icon>
			</view>
			<view class="list-item" v-for="(item,index) in programs" :key="item.id"
				@click="playMusic(item.mainSong.id,index)">
				<view class="list-item-left">
					<image :src="item.coverUrl" mode=""></image>
				</view>
				<view class="list-item-center">
					<u--text :text="item.name" size="32rpx"></u--text>
					<view class="list-item-center-count">
						<text>{{$u.timeFrom(item.createTime)}}</text>
					</view>
				</view>
				<view class="list-item-right">
					<image src="@/static/songs/more.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="play">
			<play></play>
		</view>
	</view>
</template>

<script>
	import Play from '@/components/plays.vue';

	import {
		_getRadioMsg,
		_getRadioDetailed,
	} from '@/http/home.js';

	import {
		playGdMusic
	} from '@/http/songs.js'

	export default {
		components: {
			Play
		},
		data() {
			return {
				ids: "",
				limit: 40,
				info: [],
				programs: [],
				paly: [],
				tabs: [{
					name: '声音',
				}, {
					name: '推荐',
				}],
				show: true,

			}
		},
		methods: {
			// 获取电台详情
			async RadioDetailed() {
				const {
					data = []
				} = await _getRadioDetailed(this.ids)
				this.info = data
				console.log(this.info);
			},
			// 获取电台节目列表
			async Radio() {
				const {
					programs = []
				} = await _getRadioMsg(this.ids, this.limit)
				this.programs = programs
				this.paly = programs.map(item => item.mainSong)
			},


			TabActive(item) {
				console.log('item', item);
			},
			cactive() {
				this.show = true
				console.log(this.show);
			},
			// 回到首页
			BackHome() {
				uni.navigateBack({
					data: 1
				})
			},

			// 点击播放
			playMusic(id, index) {
				this.$store.dispatch("playIndex", index);
				this.$store.dispatch("playMusic", {
					list: this.paly,
					index: index,
					listid: id
				})
			},

		},
		// 获取传过来的id
		onLoad(e) {
			this.ids = e.id
		},
		created() {
			this.Radio()
			this.RadioDetailed()
		}
	}
</script>

<style lang="scss" scoped>
	._body {
		overflow-y: scroll;
	}

	.content {
		height: 580rpx;
		background-color: #ccc;
	}

	.nav {
		padding: 15rpx 30rpx;
		display: flex;
		justify-content: space-between;

		&-right {
			display: flex;
			padding-left: 15rpx;

			&-icon {
				margin-right: 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}
		}
	}

	.info {
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		color: #fff;

		// 封面
		&-avatar {
			position: relative;
			top: 0;

			&-count {
				z-index: 999;
				position: absolute;
				top: 0;
				display: flex;
				margin: 10rpx 10rpx;
				color: #fff;

				&-type {
					width: 65rpx;
					height: 35rpx;
					background-color: #FF3A3A;
					font-size: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15rpx;
				}

				&-play {
					width: 75rpx;
					height: 35rpx;
					background-color: #ccc;
					opacity: .8;
					font-size: 25rpx;
					margin-left: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15rpx;
				}
			}

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, .1);
			}
		}

		&-msg {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			font-family: STXihei;

			.label {
				display: flex;
			}

			&-tips {
				width: 70px;
				height: 45rpx;
				background-color: #e5e5e5;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				margin-right: 15rpx;
			}

			&-name {
				display: flex;
				align-items: center;
				font-size: 16rpx;
				margin: 15rpx 0rpx;

				&-btn {
					margin-left: 10rpx;
				}
			}
		}
	}

	.message {
		display: flex;
		margin: 0rpx 30rpx;
		font-family: STXihei;
	}


	.menu {
		height: 70rpx;
		margin: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		color: #fff;

		.share,
		.comment,
		.collect {
			border-radius: 35rpx;
			background-color: #afafaf;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			text {
				margin-left: 10rpx;
			}
		}

		.comment {
			margin: 0 30rpx;
		}
	}


	.list {
		background-color: #fff;
		margin-top: -15rpx;
		border-radius: 30rpx;
		padding: 30rpx 30rpx;

		.tab {
			display: flex;
			justify-content: space-between;
		}

		&-item {
			font-family: STXihei;
			display: flex;
			align-items: center;
			margin-top: 30rpx;


			&-left {
				display: flex;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 15rpx;
				}
			}

			&-center {
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				line-height: 55rpx;
				flex: 1;

				&-count {
					display: flex;
					font-size: 8rpx;
					color: #ccc;
				}

			}

			&-right {
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 15rpx;
				}
			}

		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
	.play{
		width: 100%;
		position: fixed;
		bottom: 0;
	}
</style>
